<template>
    <div class="chat-single">
        <Panel>
            <template v-slot:header-slot>
                {{$store.getters.getUserInfoByCurrentId.nickname}}
            </template>
            <template v-slot:body-slot>
                <MsgContent></MsgContent>
                <ToolBar></ToolBar>
                <InputArea ref="inputArea"></InputArea>
            </template>
            <template v-slot:footer-slot>
                <button @click="sendMsg" class="btn-send">发送(Ctrl+Enter)</button>
            </template>
        </Panel>
    </div>
</template>

<script>
import Panel from '../common/panel'
import MsgContent from './msg-content'
import ToolBar from './toolbar'
import InputArea from './input-area'
export default {
  data () {
    return {
    }
  },
  methods: {
    sendMsg: function () {
      this.$refs.inputArea.send()
    }
  },
  components: {
    Panel,
    MsgContent,
    ToolBar,
    InputArea
  },
  created: function () {

  }
}
</script>

<style>
.chat-single{
    width: 100%;
    height: 100%;
}
.btn-send{
    float: right;
    width: 100px;
    height: 30px;
    margin-right: 25px;
    margin-top: 5px;
    border-radius: 5px;
}
</style>
